<template>
	<p class="init-title">描述</p>
	<div class="init-textarea">
		<van-field v-model="message" rows="5" autosize autofocus type="textarea"
		show-word-limit
		maxlength="100"
		placeholder="说出你的结伴旅行计划吧,比如时间安排,出行方式,旅途亮点等"/>
	</div>
	<p class="init-title">上传图片</p>
	<div class="init-uploader">
		<van-uploader v-model="fileList" max-count="3" multiple accept=".jpg,.jpeg,.png,.webp,.jfif"
		:before-delete="beforeDelete"
		/>
	</div>
	<van-cell title="目的地" is-link :value="poiname" @click="mapShow = true"/>
	<van-cell title="结伴时间" is-link :value="startTime" @click="showDate = true"/>
	<van-cell title="希望人数" is-link :value="numberOfPeople === 0 ? '' : numberOfPeople" @click="showPicker = true"/>
	<div class="sign-up other-up" :class="[disabled ? 'disableStyle' : '']" @click="subMit">发布</div>
	<!-- 地图选点 -->
	<van-popup v-model:show="mapShow" position="bottom">
		<iframe id="mapPage" frameborder=0
		    :src="mapUrl">
		</iframe>
	</van-popup>
	<!-- 选择日期 -->
	<van-popup :show="showDate" round position="bottom">
	   <van-date-picker
	      :min-date="minDate"
	      :max-date="maxDate"
		   @cancel="showDate = false"
		  @confirm="confirmData"
	    />
	</van-popup>
	<!-- 选择人数弹窗 -->
	<van-popup :show="showPicker" round position="bottom">
	  <van-picker
	    :columns="columns"
	    @cancel="showPicker = false"
	    @confirm="onConfirm"
	  />
	</van-popup>
</template>

<script setup>
	import {ref,watchEffect} from 'vue'
	import {LBS_KEY} from '@/api/my-account.js'
	const mapUrl = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&&key=${LBS_KEY}&referer=myapp`
	import moment from 'moment'
	moment.locale('zh-cn');
	import request from '@/api/request.js'
	import {compressImage} from '@/api/compression.js'
	import {upLoadCos} from '@/api/cos.js'
	import { showToast,showLoadingToast } from 'vant';
	import { useRouter } from 'vue-router'
	const $router = useRouter()  // 这是路由跳转的
	
	const message = ref('')
	// 暂存展示的图片
	const fileList = ref([]);
	// 删除指定的图片
	function beforeDelete(file,detail){
		fileList.value.splice(detail.index,1)
	}
	//显示||隐藏：地图
	const mapShow = ref(false)
	// 选中的市和位置
	const cityname = ref('')
	const poiname = ref('')
	const province = ref('')
	// 接收选中位置的回调
	window.addEventListener('message', (event)=> {
		// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
		const loc = event.data;
		if (loc && loc.module == 'locationPicker') {
		  cityname.value = loc.cityname
		  poiname.value = loc.poiname == '我的位置' ? loc.cityname : loc.poiname
		  province.value = loc.poiaddress
		  mapShow.value = false
		}
	}, false);
	// 日期日期弹窗显示||隐藏
	const showDate = ref(false)
	// 选择日期
	const C_year_A = moment().format('YYYY')//当前年
	const C_month_A = moment().subtract(1, 'month').format('MM')//当前月
	const C_day_A = moment().format('DD')//当前日
	// 获取两个月后
	const C_year_B = moment().format('YYYY')
	const C_month_B = moment().format('MM')
	const C_day_B = moment().format('DD')
	const minDate = ref(new Date(C_year_A,C_month_A,C_day_A))
	const maxDate = ref(new Date(C_year_B,C_month_B,C_day_B))
	const startTime = ref('')
	function confirmData(event){
		startTime.value = event.selectedValues.join('-')
		showDate.value = false
	}
	// 人数弹窗显示||隐藏
	const showPicker = ref(false)
	const columns = ref([]);
	for (let i = 1; i <= 20; i++) {
		if(columns.value.length === 20){
			break;
		}
		columns.value.push({ text: i, value: i });
	}
	// 选择人数
	const numberOfPeople = ref(0)
	function onConfirm(event){
		numberOfPeople.value = event.selectedOptions[0].text
		showPicker.value = false
	}
	// 监听必填值是否填写完毕
	const disabled = ref(true)
	watchEffect(()=>{
		const hasData = message.value && fileList.value.length > 0 && cityname.value && poiname.value && startTime.value && numberOfPeople.value > 0;
		disabled.value = hasData ? false : true
	})
	// 发布
	async function subMit(){
		const toast1 = showLoadingToast({
		  message: '发布中...',
		  forbidClick: true,
		  duration:0
		});
		try{
			const comressRes = await compressImage(fileList.value)
			await request.get('/check_login');
			const upLoadRes = await upLoadCos(comressRes)
			await request.post('/initiating_partner',
				{
					description:message.value,
					image:upLoadRes,
					city:cityname.value,
					full_address:poiname.value,
					companion_time:startTime.value,
					number_of_people:numberOfPeople.value
				},
			)
			toast1.close();
			$router.push('/my-activities')
		}catch(e){
			toast1.close();
		}
	}
</script>

<style>
@import url('@/style/index.css');
.init-title{
	padding: 16px 16px 5px 16px;
	font-weight: bold;
}
.init-textarea .van-field__value{
	background-color: #f9f9f9;
	padding: 4px;
	font-size: 15px;
	border-radius: 4px;
}
.init-uploader{
	padding: 16px;
}
#mapPage{
	width: 100%;
	height: 100vh;
}
</style>